<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>聊天室 by DWY</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../resources/css/chatRoom.css" />
    <script type="text/javascript" src="../../resources/js/lib.js"></script>
</head>

<body>
    <div id="list">
        <table id="onlineUser">
            <tr>
                <th>
                    <span>在线用户</span>
                </th>
            </tr>
        </table>
    </div>
    <div id="main">
        <div id="msgArea">
            <div></div>
        </div>
        <div>

            <!-- 工具条 -->
            <div class="opBar">
                <div>
                    文字颜色：
                    <input id="color" type="color" onchange="fnChangeColor(this.value)" value="#000000" />
                    字号：
                    <input id="fontSize" type="range" min="12" max="28" step="2" onchange="fnChangeFontSize(this.value)"
                        value="16" />
                    发送图片：
                    <div id="uploadImgDiv">
                        <input id="uploadImg" type="file" accept="image/*" onchange="fnPreviewImg(this, false)" />
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
                <button onclick="fnHistory()">聊天历史</button>
            </div>

            <textarea id="input"></textarea>
            <div>
                <button id="send" accesskey="s" onclick="fnSendText()">发送(<span>S</span>)</button>
                <button accesskey="x" onclick="fnExit()">登出(<span>X</span>)</button>
            </div>
        </div>
    </div>

    <!-- 预览图片面板 -->
    <dialog id="previewDialog" draggable="true">
        <div class="dialogDiv">
            <span>预览（按Esc关闭本面板）</span>
            <div>
                <div>
                    <img id="previewImg" />
                </div>
            </div>
            <button onclick="sendImg()">确认发送</button>
        </div>
    </dialog>

    <!-- 聊天记录面板 -->
    <dialog id="historyDialog" draggable="true">
        <div class="dialogDiv">
            <span>本地记录（按Esc关闭本面板）</span>
            <div>
                全部<input type="radio" name="onlyImg" value="false" checked onclick="fnEnableKeword(true)" />
                图片<input type="radio" name="onlyImg" value="true" onclick="fnEnableKeword(false)" />
            </div>
            <pre></pre>
            <progress value="0" max="100"></progress>
            <div>
                发送者：
                <input id="historyUser" list="historyUsers" onfocus="this.value=''" placeholder="输入以过滤" />
                <datalist id="historyUsers"></datalist>
                关键字：<input id="keyword" />
                <input id="btnSearch" title="查询" type="image" src="../../resources/imgs/search.png" width="48"
                    height="48" onclick="fnSearch()" />
            </div>
            <div>
                日期范围：<input id="historyDate" type="date" />
            </div>
        </div>
    </dialog>

    <script type="text/javascript" src="../../resources/js/chatRoom.js"></script>

</body>

</html>